<template>
	<div class="tableAdvanced">
		<a-collapse default-active-key="1" :bordered="false">
			<template #expandIcon="props">
                <caret-right-outlined :rotate="props.isActive ? 90 : 0"/>
			</template>
			<a-collapse-panel key="1" :header="tableI18n('statisticalPosition','统计位置')" >
				<div style="line-height: 20px">
					<a-radio-group v-model:value="config.styles.advanced.location">
						<a-radio value="top">
							{{tableI18n('fixedTable','固定表格首行')}}
						</a-radio>
						<a-radio value="bottom">
							{{tableI18n('FixedBottom','固定表格底部')}}
						</a-radio>
						<a-radio value="nome">
							{{tableI18n('nome','无')}}
						</a-radio>
					</a-radio-group>
				</div>
				<div v-if="config.styles.advanced.location!='nome'" style="margin-top: 15px">
					<div class="multicolorLabelConfig-head">
						<div style="flex: 1.5">{{tableI18n('statisticalField','统计字段')}}</div>
						<div v-if="config.styles.stylesCommon.paging" style="flex: 0.7">{{tableI18n('statisticsPage','本页统计')}}</div>
						<div>{{tableI18n('polymerization','聚合')}}</div>
						<div style="flex: 0.8">{{tableI18n('format','格式化')}}</div>
					</div>
					<div class="multicolorLabelConfig-list">
						<div class="multicolorLabelConfig-common" v-for="(table,index) in config.styles.advanced.list" :key="index">
							<div class="multicolorLabelConfig-common-le" style="flex: 1.5">
                                <MinusCircleOutlined @click="tableDelete(index)"/>
								<a-select v-model:value="table.statistics"  style="width: 100px;margin-left: 10px" :options="statisticsList" ></a-select>
							</div>
							<div v-if="config.styles.stylesCommon.paging" style="flex: 0.7">
								<a-switch size="small" v-model:checked="table.page" />
							</div>
							<div>
								<a-select style="width: 90px" v-model:value="table.polymerization" @change="polymerizeChange($event,table)">
									<a-select-option value="SUM">{{tableI18n('summation','求总和')}}</a-select-option>
									<a-select-option value="AVG">{{tableI18n('averaging','求平均')}}</a-select-option>
									<a-select-option value="MAX">{{tableI18n('maximumNumber','最大数')}}</a-select-option>
									<a-select-option value="MIN">{{tableI18n('minimumNumber','最小数')}}</a-select-option>
									<a-select-option value="CUSTOM">{{tableI18n('customize','自定义')}}</a-select-option>
								</a-select>
							</div>
							<div style="flex: 0.8" >
								<span class="configuration" @click="addConfiguration(table)">{{tableI18n('configuration','配置')}}</span>
							</div>
						</div>
					</div>
					<div class="addColor" @click="add()"><PlusCircleOutlined class="addColor-icon"/><div>{{tableI18n('NewField','新增统计字段')}}</div></div>
				</div>
			</a-collapse-panel>
		</a-collapse>
	</div>
</template>

<script>
import TableFormat from './table-format.vue'
import {Util} from "@lowcode/jpaas-base-lib";
export default {
	name: "TableAdvanced",
	data(){
		return{
			statisticsList:[],//统计字段
		}
	},
	props:['config'],
	created() {
		this.init();
	},
	methods:{
		tableI18n(name,text,key){
			return this.$ti18(name,text,"tableLang",key);
		},
		init(){
			//获取统计字段
			this.statisticsList = [];
			if(this.config.dataSources && this.config.dataSources.dimensions){
				this.config.dataSources.dimensions.filter(res=>{
					if(res.dataType =='number'){
						this.statisticsList.push({
							label:res.fieldLabel,
							value:res.tableName + '_' + res.fieldName
						})
					}
				})
			}
		},
		addConfiguration(table){
			let self = this;
			let conf = {
				curVm: self,
				component: TableFormat,
				title:this.tableI18n('formattedData','格式化数据'),
				widthHeight: ['900px', '600px'],
				data: {
					format:table.format,
					type:table.polymerization,
				},
                zIndex:999,
			};
			Util.open(conf, function (action,data) {
				if (action != 'ok') return;
				table.format = data;
			});
		},
		tableDelete(index){
			this.config.styles.advanced.list.splice(index,1)
		},
		add(){
			this.config.styles.advanced.list.push({
				statistics:'',
				page:false,
				polymerization:'',
				format:{}
			})
		},
		polymerizeChange(e,table){
			if(e=="CUSTOM"){
				table.format="";
			}
		}
	},
	watch:{
		config:{
			handler(){
				this.init()
			},
			deep:true
		}
	}
}
</script>

<style scoped>
.configuration{
	display: block;
	padding: 0px 10px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.multicolorLabelConfig-head{
	display: flex;
	height: 40px;
	border: 1px solid #d9d9d9;
	border-right: none;
	border-radius: 5px 5px 0px 0px;
}
.multicolorLabelConfig-head>div{
	flex: 1;
	height: 40px;
	line-height: 40px;
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	border-right: 1px solid #d9d9d9;
}
.multicolorLabelConfig-list{
	border: 1px solid #d9d9d9;
	border-top: none;
	border-bottom: none;
}
.multicolorLabelConfig-common{
	display: flex;
	height: 40px;
	justify-content: center;
	align-items: center;
	border-bottom: 1px solid #d9d9d9;
}
.multicolorLabelConfig-common >div{
	height: 40px;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-right: 1px solid #d9d9d9;
}
.multicolorLabelConfig-common >div:last-child{
	border-right: none;
}
.multicolorLabelConfig-common-le i{
	margin-left: 10px;
	font-size: 18px;
	margin-right: 10px;
	cursor: pointer;
}
.multicolorLabelConfig-common-le i:hover{
	color: #4285f4;
}
.addColor{
	display: flex;
	align-items: center;
	width: 100%;
	text-align: center;
	border: 1px solid #d9d9d9;
	height: 35px;
	line-height: 35px;
	color: #4285f4;
	font-size: 14px;
	margin-bottom: 15px;
	border-top: none;
	text-align: center;
	margin-bottom: 10px;
	cursor: pointer;
}
.addColor-icon{
	margin-right: 5px;
	font-size: 18px;
	margin-left: 140px;
}
</style>
